<template>
  <div class="menu-wrapper">
    <template v-for="item in routers" v-if="!item.hidden&&item.children">
      <el-submenu :index="item.name||item.path" :key="item.name" :class="elClass">
        <template slot="title">
          <v-icon v-if="item.meta&&(item.meta.icon||item.meta.svg)" :svg="item.meta.svg"
                  :icon="item.meta.icon"></v-icon>
          <v-text v-if="item.meta&&item.meta.title" size="12px" pl="10px">{{item.meta.title}}</v-text>
        </template>
        <!--    //二级菜单-->
        <template v-for="child in item.children" v-if="!child.hidden">
          <!--     有三级菜单 继续循环-->
          <v-nav-bar-item v-if="child.children&&child.children.length>0" :routers="child.children"/>
          <!--      没有三级菜单-->
          <router-link :to="item.path+'/'+child.path" :key="child.name" v-else>
            <el-menu-item :index="item.path+'/'+child.path">
              <v-icon v-if="child.meta&&(child.meta.icon||child.meta.svg)" :svg="child.meta.svg"
                      :icon="child.meta.icon"></v-icon>
              <v-text v-if="child.meta&&child.meta.title" color="white" size="10px" pl="10px">{{child.meta.title}}
              </v-text>
            </el-menu-item>
          </router-link>
        </template>

      </el-submenu>
    </template>
  </div>
</template>
<script>
  export default {
    name: 'v-nav-bar-item',
    componentName: 'v-nav-bar-item',
    props: {
      desc: {
        type: String,
        default: 'v-nav-bar-item'
      },
      collapse: Boolean,
      routers: Array
    },
    computed: {
      elClass () {
        return this.collapse ? 'el-submenu-collapse' : ''
      }
    },
    install: function (Vue) {
      Vue.component('v-nav-bar-item', this)

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-submenu-collapse > .el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }

  .el-submenu-collapse > .el-submenu__title span {
    visibility: hidden;
    width: 0;
    height: 0;
    display: inline-block
  }
  .el-submenu .el-menu-item{
    min-width: auto;
  }
  .el-submenu-collapse > .el-submenu__title {
    padding: 0;
    padding-left: 10px !important
  }

  .el-menu--collapse {
    width: auto;
  }

  a, a:focus, a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }
</style>
